<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .router-link-active a {
        color: red !important;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <router-link to="/login" tag="li">
          <a>登录</a>
        </router-link>
        <router-link to="/regirest" tag="li">
          <a>注册</a>
        </router-link>
      </ul>
      <router-view />
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    // 定义模板组件
    var Login = {
      template: "<h3>登录组件</h3>"
    }
    var Regirest = {
      template: "<h3>注册组件</h3>"
    }

    // 注册路由
    var router = new VueRouter({
      routes: [
        { path: "/", component: Login },
        { path: "/login", component: Login },
        { path: "*", redirect: "/login" },
        { path: "/regirest", component: Regirest }
      ]
    })

    var vm = new Vue({
      el: "#app",
      router,
      data: {},
      watch: {
        "$route.path": function (newVal, oldVal) {
          console.log(newVal)
          //   console.log(oldVal)
          if (newVal == "/login") {
            console.log("您当前在登录页面")
          } else if (newVal == "/regirest") {
            console.log("您当前在注册页面")
          }
        }
      }
    })
  </script>
</html>
